<template>
      <quill-editor
        v-model="content"
        :options="editorOption"
        class="quill-contain"
      >
      </quill-editor>
</template>

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/hybrid.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: '',
  props: ['form-data'],
  data () {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link']
          ],
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      }
    }
  },
  computed: {
    content: {
      set (val) {
        this.$emit('update:content', val)
      },
      get () {
        return this.formData
      }
    }
  },
  components: {
    quillEditor
  },
  created () {
  },
  mounted () {

  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
  .quill-contain {
    height: 70%;
  }
</style>
